<script setup>
import { useI18n } from 'vue-i18n'
import { NSwitch } from 'naive-ui'
const { t } = useI18n()

const data = Array.from({ length: 8 }).map((_, index) => ({
  name: `Edward King ${index}`,
  age: 32,
  address: `London, Park Lane no. ${index}`
}))

const columns = computed(() => {
  return [
    {
      titleAlign: 'center',
      title(column) {
        return h(
          'div',
          {
            style: {
              fontSize: '24px',
              fontBold: 'weight'
            }
          },
          { default: () => 'POE' }
        )
      },
      children: [
        {
          title: '端口名称',
          key: 'name',
          fixed: 'left'
        },
        {
          title: t('device.Level'),
          key: 'IP'
        },
        {
          title: t('device.power'),
          key: 'MAC'
        },

        {
          title: t('system.operation'),
          key: 'state',
          width: 200,
          fixed: 'right',
          render: (row) => {
            return [
              h(
                NSwitch,
                {
                  size: 'large',
                  round: false
                },
                { checked: () => '开启', unchecked: () => '关闭' }
              )
            ]
          }
        }
      ]
    }
  ]
})
</script>

<template>
  <n-data-table :columns="columns" :data="data" :row-key="(row) => row.address" :scroll-x="400" />
</template>

<style scoped></style>
